<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LValid</title>
    <script src="lvalid.js"></script>
    <style>
        #lvalid{
            padding: 20px;
            border: 1px solid gainsboro;
            margin-left: auto;
            margin-right: auto;
        }
        #lvalid > div{
            word-break: break-all;
        }
        #lvalid > button{
            margin-right: auto;
            padding: 10px 40px;
            margin-left: 100px;
            margin-top: 20px;
        }
        .lvalid{

        }
    </style>
    <script>
        var data = "";
        function test() {
            data = lvalid.getValue();
            console.log(data);
            console.log(typeof data);
            if(typeof data === "object"){
                document.getElementById("info").innerHTML = "验证通过:"+JSON.stringify(data);
            }else{
                document.getElementById("info").innerHTML = "验证未通过："+data;
            }
        }
    </script>
</head>
<body>
    <div id="lvalid">
        <div>
            <span>姓名：</span>
            <input class="lvalid" id="name" required="required" info="请输入姓名">
            <span>必填</span>
        </div>
        <div>
            <span>年龄：</span>
            <input class="lvalid" id="age" required="required" info="请输入年龄" valid="int" validInfo="年龄输入有误">
            <span>正整数</span>
        </div>
        <div>
            <span>身高：</span>
            <input class="lvalid" id="height" required="required" info="请输入身高" valid="decimal" validInfo="身高输入有误">
            <span>正负数字、包括小数</span>
        </div>
        <div>
            <span>存款：</span>
            <input class="lvalid" id="money" required="required" info="请输入存款" valid="number" validInfo="存款输入有误">
            <span>正负数字</span>
        </div>
        <div>
            <span>手机号：</span>
            <input class="lvalid" id="mobile" info="请输入手机号" valid="mobile" validInfo="手机号输入有误">
        </div>
        <div>
            <span>座机号：</span>
            <input class="lvalid" id="phone" info="请输入座机号" valid="phone" validInfo="座机号输入有误">
        </div>
        <div>
            <span>邮箱：</span>
            <input class="lvalid" id="email" info="请输入邮箱" valid="email" validInfo="邮箱输入有误">
        </div>
        <button onclick="test();">提交</button>
        <div id="info"></div>
    </div>


</body>
</html>